<template>
	<div id="app">
		<div class="toppie">
			<pie1 />
			<pie2 />
			<pie3 />
		</div>
	</div>
</template>
<script>
import pie1 from "./pie1.vue";
import pie2 from "./pie2.vue";
import pie3 from "./pie3.vue";
export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "bottom",
	data() {
		return {};
	},
	methods: {
		// getData() {
		//  let _this = this;
		//  this.$http
		//      .get("ckFormDistView")
		//      .then(res => {
		//          console.log(res);
		//          if (res.data.status == 0) {
		//          } else {
		//              _this.config.header = res.data.header;
		//              _this.config.columnWidth = res.data.columnWidth;
		//              _this.config.data = res.data.data;
		//              _this.config = { ..._this.config };
		//          }
		//      })
		//      .catch(err => {});
		// }
	},
	created() {
		// this.getData();
		// let _this = this;
		// setInterval(function () {
		//  _this.getData();
		// }, 300000);
	},
	components: {
		pie1,
		pie2,
		pie3
	}
};
</script>
<style >
.app {
	margin: 0;
}

/* // #toppie {
// 	background: rgba(228, 228, 228, 0.463);
// 	width: 59.2%;
// 	height: 24%;
// 	position: absolute;
// 	top: 67%;
// 	left: 30px;
// 	white-space: nowrap;

// 	.dv-scroll-board {
// 		height: calc(~"100% - 60px");
// 	}
// } */
.toppie {
	/* width: 300px;	 */
	height: 130px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.table-name {
	font-size: 25px;
	color: rgb(236, 240, 245);
}
</style>

